<template>
  <div class="banner" id="banner1">
    <div class="banner-bgdarkener">
      <ElRow>
        <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
        <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
          <div style="height: 200px" />
          <h2 class="banner-heading">
            Consulting: An Online and Offline Interaction
          </h2>
          <p class="banner-text">
            LID-CBALT provides consulting service for LID projects including
            condition and feasibility evaluation of LID facility and site-based
            "higher-performance and lower-cost" LID layout.
          </p>
        </ElCol>
      </ElRow>
    </div>
  </div>

  <el-row>
    <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="3"></el-col>
    <el-col :xs="22" :sm="22" :md="20" :lg="20" :xl="18">
      <h1 class="title">Four Files Are Needed</h1>
      <div class="line"></div>
      <el-row id="file-explain">
        <el-col v-for="item in fileList" :key="item.index" :xs="12" :span="6">
          <div class="file-area">
            <p class="file-title">{{ item.title }}</p>
            <div class="file-box">
              <i :class="item.icon"></i><br />
              {{ item.suffix }}<br /><br />
              <a @click="jumpto('tutorial', item.tabname)">click here</a><br />
              {{ item.text }}
            </div>
          </div>
        </el-col>
      </el-row>
      <h1 class="title">Remote computing</h1>
      <div class="line"></div>
      <div id="rc-div">
        <ElRow>
          <ElCol :xs="10" :span="8">
            <img class="rcimg" src="../assets/remote.png" />
          </ElCol>
          <ElCol :xs="14" :span="16">
            <p>Send the required files and we will calculate result for you</p>
            <b>E-mail：lid_cbalt@163.com</b>
          </ElCol>
        </ElRow>
      </div>

      <h1 class="title">Download Our LID Layout Tool</h1>
      <div class="line"></div>
      <div id="download-div">
        <el-row>
          <el-col :span="8" class="dl-smbox">
            <el-row>
              <el-col :span="8">
                <img
                  alt="Project logo"
                  src="../assets/win.png"
                  style="max-width: 100%; height: 50px; margin-top: 5px"
                />
              </el-col>
              <el-col :span="16">
                <p class="ver-title">LID-CBALT for Windows</p>
                Coming soon
                <button class="dl-btn" style="display: none">Download</button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <div id="apple-div">
              <el-row>
                <el-col :span="8">
                  <img
                    alt="Project logo"
                    src="../assets/apple.png"
                    style="max-width: 100%; height: 50px; margin-top: 5px"
                  />
                </el-col>
                <el-col :span="16">
                  <p class="ver-title">LID-CBALT for Mac</p>
                  Coming soon
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8">
                <img
                  alt="Project logo"
                  src="../assets/other.png"
                  style="max-width: 100%; height: 50px; margin-top: 5px"
                />
              </el-col>
              <el-col :span="16">
                <p class="ver-title">More Version</p>
                Coming soon
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "Toolkit",
  emits: ["change-comp"],
  data() {
    return {
      fileList: [
        {
          index: 1,
          title: "Research Area",
          icon: "el-icon-document",
          suffix: "(.shp)",
          text: "learn how to creature the file",
          tabname: "one",
        },
        {
          index: 2,
          title: "Research Area SWMM Model",
          icon: "el-icon-document",
          suffix: "(.inp)",
          text: "learn how to creature the file",
          tabname: "two",
        },
        {
          index: 3,
          title: "LID Types for Sub-Catchment",
          icon: "el-icon-document",
          suffix: "(.txt)",
          text: "learn how to creature the file",
          tabname: "three",
        },
        {
          index: 4,
          title: "LID Facilities Unit Price",
          icon: "el-icon-document-checked",
          suffix: "(.txt)",
          text: "use our online price tool",
          tabname: "four",
        },
      ],
    };
  },
  methods: {
    jumpto(path, tabname) {
      console.log("emit event change-comp:" + path);
      this.$emit("change-comp", path);
      document.getElementById("tutorComp").innerHTML = tabname;
    },
  },
};
</script>

<style scoped>
.banner {
  height: 520px;
  background-image: url("http://lid-cbalt.com/data/images/bg1-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-bottom: 10px;
  text-align: left;
}
.banner-bgdarkener {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
  padding: 0 20px 0 20px;
}
.banner-heading {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #6cdb9f;
  margin-top: 0px;
}
.banner-text {
  height: 85px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
.title {
  color: #575b59;
  margin-top: 60px;
  text-align: left;
}
#file-explain {
  justify-content: space-between;
  width: 100%;
}
.file-area {
  padding: 0 15px 0 15px;
}
.file-title {
  height: 50px;
  font-size: 1.2rem;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 600;
  color: #607c6c;
  margin-bottom: 13px;
}
i {
  margin: 15px 0 5px 0;
  font-size: 30px;
  font-weight: 700;
}
.file-box {
  background-color: #e3e9e6;
  border-style: dashed;
  border-color: #4c6c5a;
  border-width: 2px;
  border-radius: 10px;
  height: 170px;
  padding: 0 5px 0 5px;
}
#download-div {
  margin-bottom: 200px;
}
.dl-smbox {
  padding: 0 10px 0 10px;
}
.ver-title {
  margin-top: 0px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  color: #555555;
}
.dl-btn {
  background-color: #91b354;
  border-radius: 7px;
  border-color: #91b354;
  border-width: 0px;
  height: 30px;
  font-family: "Arial Black", "Arial Normal", "Arial";
  font-weight: 900;
  font-style: normal;
  color: #ffffff;
  padding: 3px 6px 4px 6px;
}
#apple-div {
  border-style: solid;
  border-color: #555555;
  border-width: 0px;
  border-left-width: 1px;
  border-right-width: 1px;
}
.line {
  width: 80%;
  height: 5px;
  background: inherit;
  background-color: #91b354;
  margin-bottom: 40px;
}
a {
  text-decoration: underline;
  color: rgb(0, 0, 201);
}
#rc-div .el-row {
  height: 90px;
  text-align: left;
  font-size: 1.1rem;
}
.rcimg {
  height: 90px;
  width: 100%;
  max-width: 240px;
}
</style>